import {GraphModel, h, NodeConfig, RectNode, RectNodeModel} from '@logicflow/core'
import {nodeStyleHandle} from '../tool'

class TaskModel extends RectNodeModel {
    static extendKey = 'TaskModel';

    constructor(data: NodeConfig, graphModel: GraphModel) {
        super(data, graphModel)
        if (data.properties) {
            this.width = (data.properties.width ? data.properties.width : 120) as number
            this.height = (data.properties.height ? data.properties.height : 40) as number
        }
    }

    getNodeStyle(): {
        [x: string]: any;
        width?: number;
        height?: number;
        radius?: number;
        fill?: string;
        stroke?: string;
        strokeWidth?: number;
    } {
        const style = super.getNodeStyle()
        return nodeStyleHandle(this, style)
    }
}

class TaskView extends RectNode {
    static extendKey = 'TaskNode';

    getLabelShape(): h.JSX.Element {
        const {model} = this.props
        const {x, y, width, height} = model
        const style = model.getNodeStyle()
        return h(
            'svg',
            {
                x: x - width / 2 + 5,
                y: y - height / 2 + 5,
                width: 25,
                height: 25,
                viewBox: '0 0 1274 1024'
            },
            h('path', {
                fill: style.stroke,
                d:
                    'M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z'
            })
        )
    }

    getShape(): h.JSX.Element {
        const {model} = this.props
        const {x, y, width, height, radius} = model
        const style = model.getNodeStyle()
        // todo: 将basic-shape对外暴露，在这里可以直接用。现在纯手写有点麻烦。
        return h('g', {}, [
            h('rect', {
                ...style,
                x: x - width / 2,
                y: y - height / 2,
                rx: radius,
                ry: radius,
                width,
                height
            }),
            this.getLabelShape()
        ])
    }
}

const Task = {
    type: 'ingenious:task',
    view: TaskView,
    model: TaskModel
}

export {TaskView, TaskModel}
export default Task
